<template>
    <view class="app-related-suggestion-product" v-if="goods_list.length > 0 || fixedTitle">
        <view v-if="isRecommend" class="app-top dir-left-nowrap main-center cross-center">
            <view class="app-content dir-left-nowrap main-between cross-center">
                <view class="app-line"></view>
                <image v-if="showIcon" class="app-icon-love image-cover image-no-rep"
                       :src="commentStyle? commentStyle.pic_url : '../../../static/image/icon/icon-favorite.png'"></image>
                <text class="app-text" :style="{color: commentStyle ? commentStyle.text_color :'#999' }">
                    {{ commentStyle ? commentStyle.text : text }}
                </text>
                <view class="app-line"></view>
            </view>
        </view>
        <view class="recommend-list main-between flex-wrap">
            <app-goods
              v-for="(goods,idx) in list" :key="goods.id"
              :showTag="false"
              :listStyle="2"
              :index="idx"
              :theme="getTheme"
              :goods="goods"
              :show_time="false"
              :showBuyBtn="false"
              :c_border_top="16"
              :c_border_bottom="16"
              :padding="24"
              :show_sale="true"
            ></app-goods>
        </view>
    </view>
</template>

<script>
import appGoods from '@/components/basic-component/app-goods/app-goods.vue';
import {mapState, mapGetters} from 'vuex';

export default {
    name: 'app-related-suggestion-product',
    data() {
        return {
            request: this.value,
            goods_list: []
        }
    },
    components: {
        appGoods
    },
    props: {
        commentStyle: {
            type: Object,
            default() {
                return {
                    pic_url: '../../../static/image/icon/icon-favorite.png',
                    text_color: '#999',
                    text: '您或许喜欢',
                    list_style: 2
                }
            },
        },
        isRecommend: {
            type: Boolean,
            default: function () {
                return true;
            }
        },
        fixedTitle: Boolean,
        showIcon: {
            type: Boolean,
            default: function () {
                return true;
            }
        },
        value: {
            type: Boolean,
            default: function () {
                return true;
            }
        },
        list: {
            type: Array,
            default: function () {
                return [];
            }
        },
        text: {
            type: String,
            default: function () {
                return '相关推荐';
            }
        },
        sign: String,
        theme: [Object, String]
    },
    computed: {
        ...mapState({
            height: state => state.gConfig.systemInfo.windowHeight,
            appSetting: state => state.mallConfig.mall.setting,
            appImg: state => state.mallConfig.__wxapp_img.mall,
            mall: state => state.mallConfig.mall,
            isShowGoodsName: state => state.mallConfig.mall.setting.is_show_goods_name,
            isShowSalesNum: state => state.mallConfig.mall.setting.is_show_sales_num,
            isListUnderlinePrice: state => state.mallConfig.mall.setting.is_list_underline_price,
            platform: function (state) {
                return state.gConfig.systemInfo.platform;
            }
        }),
        ...mapGetters('mallConfig', {
            getVideo: 'getVideo'
        })
    },
    methods: {
        route_jump(data) {
            // #ifndef MP-BAIDU
            if (data.video_url && this.getVideo == 1) {
                // #ifdef MP
                uni.navigateTo({
                    url: `/pages/goods/video?goods_id=${data.id}&sign=${this.sign}`
                });
                // #endif
                // #ifdef H5
                uni.navigateTo({
                    url: data.page_url
                });
                // #endif
            } else {
                uni.navigateTo({
                    url: data.page_url
                });
            }
            // #endif

            // #ifdef MP-BAIDU
            uni.navigateTo({
                url: data.page_url
            });
            // #endif
        }
    },
    watch: {
        list: {
            handler(newVal) {
                if (!newVal) return;
                this.goods_list = [];
                for (let i = 0; i < newVal.length; i += 2) {
                    if (i + 1 !== newVal.length) {
                        this.goods_list.push([newVal[i], newVal[i + 1]]);
                    } else {
                        this.goods_list.push([newVal[i]]);
                    }
                }
            },
            immediate: true,
            deep: true
        }
    }
}
</script>

<style scoped lang="scss">
.app-related-suggestion-product {
    width: $screen-width;
    background-color: #f7f7f7;

    .app-top {
        width: 100%;
        //height: #{50rpx};
        margin: #{40rpx} 0 #{32rpx} 0;

        .app-content {
            height: #{24rpx};
            //width: calc(100% - #{450rpx});
            .app-line {
                width: #{56rpx};
                height: #{2rpx};
                margin: 0 #{12rpx};
                background-color: #bbbbbb;
            }

            .app-icon-love {
                width: #{24rpx};
                height: #{24rpx};
                margin-left: #{12rpx}
                //background-image: url('../../../static/image/icon/icon-favorite.png');
            }

            .app-text {
                margin: 0 #{12rpx};
                font-size: #{24rpx};
                color: #999999;
            }
        }
    }

}

.app-bottom {
    width: #{750upx};
    padding: #{0 10upx};

    .row {
        width: 100%;
        margin-bottom: #{10upx};
    }

    .item {
        width: #{358upx};
        background-color: #ffffff;
        margin: #{5upx 0 0 0};
        border-radius: #{16upx};
    }

    .image-name {
        width: 100%;
        position: relative;

        .app-image {
            width: #{358upx};
            height: #{370upx};
            border-top-left-radius: #{16upx};
            border-top-right-radius: #{16upx};
        }

        .out-dialog {
            border-top-left-radius: #{16upx};
            border-top-right-radius: #{16upx};
            width: #{358upx};
            height: #{370upx};
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, .5);

            image {
                width: #{358upx};
                height: #{370upx};
            }
        }

        .name {
            font-size: #{28upx};
            color: #353535;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            line-height: #{32upx};
            height: #{64upx};
            width: #{318upx};
            margin: #{20upx 20upx 0 20upx};
        }
    }
}

.price-total {
    margin-bottom: #{20upx};
    font-size: #{28upx};
    line-height: 1;

    .price {
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .volume {
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        font-size: #{24rpx};
        color: #999999;
    }
}

.content {
    padding: #{0 24upx 0 24upx};
}

.content-no {
    height: calc(100% - #{454upx});
}

.advance-content {
    height: #{40upx};
    padding: #{0 0 0 24upx};
    margin-bottom: #{10upx};
}

.content-yes {
    height: calc(100% - #{494upx});
}

.deposit {
    display: inline-block;
    font-size: #{19rpx};
    color: #ffffff;
    line-height: 1;
    border-radius: #{7rpx};
    padding: #{5rpx 5rpx};
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin: #{8upx 0};
}

.member-price {
    padding: #{8upx 0};
}

.sup-vip {
    margin-bottom: #{8upx};
}

.origin-price {
    font-size: 21 upx;
    color: #999999;
    text-decoration: line-through;
}
.recommend-list {
    padding: 0 24rpx;
}
</style>